﻿
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            <a data-toggle="collapse"
               href="#collapseTwo">
                <strong>@app.PrivilegeTree?.LastOrDefault().DisplayName</strong>
            </a>
        </h3>
    </div>
    <div class="panel-body">
        <div id="holidaySetting" class="active" avalonctrl="holidaySetting">
            <style type="text/css">

                ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }

                .table-responsive, .table-resize {
                    border: 1px solid var(--table-border);
                }

                .pull-right {
                    float: right !important;
                }

                .btn-icon-toggle {
                    border-radius: 999px;
                }

                .btn.btn-primary, .btn.btn-success {
                    color: #007AFF;
                    color: #fff;
                    background-color: #3598db;
                    background-color: var(--primary-bg);
                    border-color: #3598db;
                    border-color: var(--primary-bg);
                }

                .btn {
                    display: inline-block;
                    margin-bottom: 0;
                    font-weight: 400;
                    text-align: center;
                    vertical-align: middle;
                    touch-action: manipulation;
                    background-image: none;
                    border: 1px solid transparent;
                    white-space: nowrap;
                    padding: 1px 14px;
                    line-height: 1.846153846;
                    border-radius: 3px;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    background-color: #fff;
                    color: var(--text-color-3);
                }

                .btn-flat, .btn-icon-toggle {
                    background-color: transparent;
                    font-weight: 500;
                    border-color: transparent;
                }

                .btn-icon-toggle {
                    padding: 0;
                    width: 28px;
                    height: 28px;
                }

                #holidaySetting {
                    width: 1100px;
                }

                    #holidaySetting .table-responsive .dp-wrapper {
                        border: none;
                    }

                    #holidaySetting .card.select-result {
                        box-shadow: none;
                        border: 1px solid var(--table-border);
                        margin-left: 10px;
                        font-size: 14px;
                    }

                    #holidaySetting .select-result .card-head {
                        background: #EEF1F4;
                        line-height: 50px;
                        min-height: 50px;
                    }

                        #holidaySetting .select-result .card-head > div:nth-child(1) {
                            padding-left: 10px;
                        }

                        #holidaySetting .select-result .card-head > div:nth-child(2) {
                            padding-right: 8px;
                        }

                        #holidaySetting .select-result .card-head > div {
                            display: inline-block;
                        }

                .select-result .list {
                    margin-left: 10px;
                }

                    .select-result .list span {
                        display: inline-block;
                        width: 195px;
                        height: 30px;
                        line-height: 30px;
                        vertical-align: middle;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                .form-control {
                    display: inline-block;
                    width: 100%;
                    height: 35px;
                    padding: 4.5px 14px;
                    line-height: 1.846153846;
                    background-color: #fff;
                    background-image: none;
                    border: 1px solid var(--split-line-color);
                    border-radius: 2px;
                    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                    padding: 0;
                    height: 28px;
                    border-left: 0;
                    border-right: 0;
                    border-top: 0;
                    border-bottom-color: var(--split-line-color);
                    background: transparent;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                }
            </style>
            <div class="flex-box-wrapper">
                <div class="operating-wrapper">
                    <div style="margin-bottom: 10px;">提示：请点击右侧的“编辑”按钮来添加或修改节假日。</div>
                    <div class="table-responsive" style="width: 722px;float: left;">
                        <div id="wholeCalendar" style="width:722px" class="clearfix dp-wrapper">

                        </div>
                    </div>
                    <div class="card select-result" style=" float: left; width: 300px;">
                        <div class="card-head">
                            <div>节假日列表</div>
                            <div class="pull-right">
                                <a id="btnEdit" class="btn btn-primary" onclick="model.showEdit()">编辑</a>
                                <span id="btnEdit2" style="display: none;">
                                    <a class="btn btn-primary" onclick="model.submitHoliday()">保存</a>
                                    <a class="btn btn-default" onclick="model.cancel()">取消</a>
                                    <a class="btn btn-icon-toggle" title="清空" onclick="model.clearChoosed()"> <i class="glyphicon glyphicon-trash"></i></a>
                                </span>
                            </div>
                        </div>
                        <div class="card-body no-padding multi-selected">
                            <ul class="list">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    <link rel="stylesheet" href="~/content/js/wq-datepicker/wq-datepicker.css?v=@app.PlatformSettings.VersionNumber" />
    <script src="~/content/js/xms.utility.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script src="~/content/js/wq-datepicker/wq-datepicker.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script type="text/javascript">

        var curYear = new Date().getFullYear(),
            selector = ".year";
        var model = {
            choosed: [],
            holidays: [],
            flag: false,
            sendTime: "",
            showEdit: function () {
                model.flag = true;
                model.showOrHide();
                changeSelected();
                q.setForbid(selector, true);
            },
            clearChoosed: function () {
                model.choosed = [];
                q.clearSelected();
                sel = [];
                $(".select-result .card-body .list li").remove();
            },
            cancel: function () {
                model.flag = false;
                model.showOrHide();
                changeSelected();
                q.setForbid(selector, false);
            },
            showOrHide: function () {
                if (model.flag) {
                    $("#btnEdit").hide();
                    $("#btnEdit2").show();
                }
                else {
                    $("#btnEdit").show();
                    $("#btnEdit2").hide();
                }
            },
            addDate: function (data) {
                $("<li><span style=\"width:110px\">" + data.HolidayDate + "</span><input type=\"text\" class=\"form-control\" placeholder=\"请输入节假日名称\" style=\"width:136px\" value=\"" + data.Name + "\" /></li>").appendTo(".select-result .card-body .list");
            },
            delDate: function (index) {
                model.choosed.splice(index, 1);
                $(".select-result .card-body .list li").each(function (i, e) {
                    if (i == index) {
                        $(this).remove();
                    }
                })
                changeSelected();
            },
            submitHoliday: function () {
                var url = "/CampusHoliday/Save";

                var holidays = [];
                $(".select-result .card-body .list li").each(function (i, e) {
                    var holiday = { "Name": $($(this).children("input").get(0)).val(), "HolidayDate": $($(this).children(":first")).text() };

                    holidays.push(holiday);
                })

                Xms.Web.Post(url, JSON.stringify({ "Holidays": holidays }), false, function (result) {
                    if (result.IsSuccess) {
                        Xms.Web.Toast("保存成功！", true);
                    }
                    else {
                        Xms.Web.Toast("保存失败！", false);
                    }
                }, false, false, false);
                model.flag = false;
                model.showOrHide();
                q.setForbid(selector, false);
            }
        };

        function init() {
            Xms.Web.Get("/CampusHoliday/Query?year=" + curYear, function (data) {
                model.holidays = [];
                model.choosed = data;
                model.holidays = data;
                changeSelected();

                $.each(data, function (i, e) {
                    model.addDate(e);
                })
            });
        }
        init();

        var sel;
        function changeSelected() {
            var arr = [];
            $.each(model.choosed, function (k, value) {
                arr.push(model.choosed[k].HolidayDate);
            });
            sel = arr;
            q.setSelected(arr);
            q.setHoliday(model.holidays);
        }

        var q = WqDatepicker({
            container: "#wholeCalendar",
            otherdays: false,
            multi: false,
            click2selected: true,
            wholeYear: true,
            onClick: function (selected) {
                if (model.flag) {
                    var selLen = sel.length;
                    var len = selected.length;
                    selected.sort();
                    if (len > selLen) {
                        for (var i = 0; i < len; i++) {
                            var index = sel.indexOf(selected[i]);
                            if (index == -1) {
                                model.choosed.splice(i, 0, { Name: "", HolidayDate: selected[i] });
                                sel.splice(i, 0, selected[i]);

                                model.addDate({ Name: "", HolidayDate: selected[i] });

                                break;
                            }
                        }
                    } else if (selLen > len) {
                        for (var j = 0; j < selLen; j++) {
                            var index = selected.indexOf(sel[j]);
                            if (index == -1) {
                                model.choosed.splice(j, 1);
                                sel.splice(j, 1);

                                model.delDate(j);
                                break;
                            }
                        }
                    }
                } else {
                    $("#wholeCalendar td").removeClass("active");
                    Xms.Web.Alert(false, "请点击右侧的“编辑”按钮来添加或修改节假日！");
                    changeSelected();
                }
            },
            onChangeYear: function (year) {
                curYear = year;
                if (model.flag) {
                    Xms.Web.Alert(false, "今年的节假日尚未保存。")
                } else if (!model.flag) {
                    init();
                }
            }
        });

    </script>
}